<template>
    <div class="c-container">
        <div class="item">
            <div style="height:300px;" class="left">
                <VHeader icon="md-apps" text="柱状图" style="margin-bottom: 5px;">
                </VHeader>
                <div style="height:258px;" :id="bar"></div>
            </div>
            <div style="height:300px;" class="right">
                <VHeader icon="md-apps" text="基础表单" style="margin-bottom: 20px;">
                </VHeader>
            </div>
            <VBox icon="ios-chatbubbles" :model.sync="viewCode" title="table代码" :height="550" :width="1000"
                :padding="15">
                <!-- footer 这里不写，默认有一个关闭按钮 -->
            </VBox>
        </div>
    </div>
</template>
  <script>
import VHeader from "@/components/VHeader.vue";
import VBox from "@/components/VBox.vue";
export default {
    components: { VHeader, VBox },
    data() {
        return {
            viewCode: true
        };
    },
    mounted() {

    }
};
</script>
  <style lang="scss" scoped>
  .c-container {
      background: #f1f1f1;
      padding: 10px;
  
      .item {
          display: flex;
  
          >div {
              flex: 1;
              margin: 10px;
              background: #fff;
          }
      }
  }
  </style>